import React from 'react';
import { Card, Table, Tag, Button, Breadcrumb } from 'antd';
import { HomeOutlined } from '@ant-design/icons';
import { Link, useNavigate } from 'react-router-dom';
import MainLayout from '../../components/MainLayout';
import styles from './Announcement.module.less';

interface AnnouncementItem {
  id: string;
  title: string;
  type: string;
  status: string;
  publishTime: string;
  publisher: string;
}

const Announcement: React.FC = () => {
  const navigate = useNavigate();

  const columns = [
    {
      title: '公告标题',
      dataIndex: 'title',
      key: 'title',
      width: '30%',
      render: (text: string) => (
        <span className={styles.title}>{text}</span>
      )
    },
    {
      title: '公告类型',
      dataIndex: 'type',
      key: 'type',
      width: '15%',
      render: (type: string) => (
        <Tag color="blue">{type}</Tag>
      )
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      width: '15%',
      render: (status: string) => (
        <Tag color={status === '已发布' ? 'success' : 'default'}>
          {status}
        </Tag>
      )
    },
    {
      title: '发布时间',
      dataIndex: 'publishTime',
      key: 'publishTime',
      width: '20%',
    },
    {
      title: '发布人',
      dataIndex: 'publisher',
      key: 'publisher',
      width: '10%',
    },
    {
      title: '操作',
      key: 'action',
      width: '10%',
      render: (_: unknown, record: AnnouncementItem) => (
        <Button 
          type="link" 
          onClick={() => navigate(`/announcement/${record.id}`)}
        >
          查看详情
        </Button>
      )
    }
  ];

  const data: AnnouncementItem[] = [
    {
      id: '1',
      title: '关于开展2024年度档案预验收工作的通知',
      type: '验收通知',
      status: '已发布',
      publishTime: '2024-03-15 10:30',
      publisher: '张三'
    },
    // ... 更多数据
  ];

  return (
    <MainLayout>
      <div className={styles.breadcrumb}>
        <Breadcrumb items={[
          {
            title: <Link to="/home"><HomeOutlined /> 首页</Link>,
          },
          {
            title: '内部公告',
          }
        ]} />
      </div>

      <Card 
        title="公告列表" 
        className={styles.announcementCard}
        extra={
          <Button>导出</Button>
        }
      >
        <Table 
          columns={columns} 
          dataSource={data}
          rowKey="id"
          pagination={{
            pageSize: 10,
            showTotal: total => `共 ${total} 条`,
            showQuickJumper: true,
            showSizeChanger: true
          }}
          className={styles.table}
        />
      </Card>
    </MainLayout>
  );
};

export default Announcement; 